<template>
  <Dropdown placement="bottom" :trigger="['click']">
    <BarsOutlined style="font-size: 18px" />
    <template #overlay>
      <a-menu>
        <a-menu-item
          @click="handleItemClick(item)"
          v-for="(item, index) in renderDrops"
          :key="item.key"
        >
          <Icon v-if="item.icon" class="mr-2" :component="item.icon" />{{ item.label }}
        </a-menu-item>
      </a-menu>
    </template>
  </Dropdown>
</template>
<script lang="ts" setup>
  import { ref, unref, h, watchEffect } from 'vue';
  import {
    BarsOutlined,
    EditOutlined,
    CloseCircleOutlined,
    InfoCircleOutlined,
    ApartmentOutlined,
    PlusCircleOutlined,
  } from '@ant-design/icons-vue';
  import Icon from '@ant-design/icons-vue';
  import { SvgIcon } from '@/components/basic/svg-icon';
  import { Dropdown, Menu } from 'ant-design-vue';

  interface Props {
    dropItems?: any;
    showDefault?: any;
  }

  const props = withDefaults(defineProps<Props>(), {
    dropItems: [],
    showDefault: true,
  });

  const constantKeys = [
    // {
    //   label: '新建组织',
    //   key: 'add',
    //   icon: h(PlusCircleOutlined),
    // },
    // {
    //   label: '编辑组织',
    //   key: 'edit',
    //   icon: h(EditOutlined),
    // },
    // {
    //   label: '删除组织',
    //   key: 'del',
    //   icon: h(CloseCircleOutlined),
    // },
  ];

  const emits = defineEmits(['click']);
  const renderDrops = ref([]);
  watchEffect(() => {
    if (props && props.showDefault) {
      renderDrops.value = constantKeys.concat(props.dropItems ?? []);
    } else if (props && !props.showDefault) {
      renderDrops.value = props.dropItems ?? [];
    }
  });

  const handleItemClick = (item) => {
    emits('click', item);
  };
</script>
